{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'customer.css' | asset_url | stylesheet_tag }}
<style>
  .refer-a-friend #shopify-section-header {
    position: sticky;
    top: 0;
  }
  .refer-content {
    text-align: center;
  }
  .refer-a-friend .twy-text {
    top: 50%; 
  }
  .refer-content .heading, .refer-content .heading_m {
    color: #F4F8FC;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
    /* 36px Bold 48px */
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 133.333% */
  }
  
  .refer-content .heading_m {
    display: none; 
  }
  .refer-content .description {
    color: #F4F8FC;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 133.333% */
  }
  
  .refer-content .small-text {
    color: #F4F8FC;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
    /* 16px regular 24px */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin-top: 20px;
  }
  .refer-content .ten-button  {
    margin-top: 40px;
  }
  .refer-content .button {
    transition-duration: .3s;
    transform: translate(0);
    overflow: hidden;
    bottom: 0;
    left: 0;
    border: 2px solid #FFFFFF;
    border-radius: 24px;
    background: transparent;
    color: #fff;
    padding: 0 24px;
    outline: none;
  }
  .refer-content .default-button {
    border-radius: 24px;
    background: #fff;
    padding: 0 24px;
    color: #000;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    outline: none;
    width: auto;
  }
  .refer-a-friend .product-popup-modal__button {
    border-radius: 24px;
    background: #fff;
    padding: 0 24px;
    color: #000;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .refer-a-friend .product-popup-modal__toggle {
    top: 20px;
    position: absolute;
    right: 0;
    padding-right: 20px;
  }
  .refer-a-friend .customer button {
    width: auto;
    outline: none;
  }
  .refer-a-friend .login a {
    text-align: left;
    width: 100%;
    margin-top: 10px!important;
    font-size: 12px!important;
    line-height: 20px;
    color: #8d8d8d;
  }
  .product-popup-modal__toggle svg {
    color: #000;
  }
  .refer-a-friend .product-popup-modal__toggle path{
    fill: #000;
  }
  .banner-refer-friend .product-popup-next {
    margin-left: 24px;
  }
  .refer-a-friend .customer .field label {
    color: #ccc;
  }
  .refer-a-friend .customer #login {
    font-size: 30px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 500;
  }
  
  .refer-a-friend .refer-content .button:hover {
    color: #fff;
    border-color: #15182A;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: linear-gradient(to right,#000,#000),linear-gradient(90deg,#000,#000);
  }
  
  @media screen and (min-width: 750px) {
    .refer-a-friend .product-popup-modal__content {
      max-width: 440px;
      max-height: 480px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      margin: 0;
      background: #fff;
      padding: 40px 30px;
      border-radius: 12px;
      overflow-y: hidden;
    }
    .banner-refer-friend .sign-up-button__mobile {
      display: none;
    }
  }
  @media screen and (max-width: 750px) {
    .refer-content .heading {
      display: none;
    }
    .refer-content .heading_m {
      display: block;
    }
    .refer-content .ten-button {
      margin-top: 2.0rem;
    }
    .refer-a-friend .product-popup-modal__content h1 {
      text-align: center;
    }
    .refer-content .heading_m {
      color: #F4F8FC;
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 34px; /* 200% */
    }
    .refer-content .description {
      color: #F4F8FC;
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px; /* 133.333% */
    }
    .refer-content .small-text {
      color: #F4F8FC;
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px; /* 171.429% */
      width: 18rem;
      margin: 0 auto;
      letter-spacing: 0.3px;
      text-align: left;
      padding: 10px 0 2px;
    }
    html[lang='it'] .refer-content .small-text,
    html[lang='es'] .refer-content .small-text,
    html[lang='nl'] .refer-content .small-text,
    html[lang='fr'] .refer-content .small-text,
    html[lang='de'] .refer-content .small-text
    {
      width: 30rem;
    }
    .refer-a-friend .twy-text {
      top: unset;
      bottom: 5rem;
      transform: unset;
    }
    
    .sign-up-button {
      display: none; 
    }
    .sign-up-button__mobile {
      display: block;
    }
  }
</style>
<div class="content-banner">
  <div class="bg-image">
    <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
    {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      {%- if section.settings.image != blank -%}
        <img
          srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
          src="{{ section.settings.image | img_url: '1500x' }}"
          alt="{{ section.settings.image.alt | escape }}"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
    </div>
    <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
    {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      {%- if section.settings.image_mobile != blank -%}
        <img
          srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
          src="{{ section.settings.image_mobile | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image_mobile.alt | escape }}"
          width="{{ section.settings.image_mobile.width }}"
          height="{{ section.settings.image_mobile.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
    </div>
  </div>
  {% if section.settings.heading != blank %}
    <div class="twy-text">
      <div class="page-width">
        <div class="refer-content">
          <div class="heading">
            {{ section.settings.heading }}
          </div>
          <div class="heading_m">
            {{ section.settings.heading_m }}
          </div>
          <div class="description">
            {% if section.settings.desc %}
              {{ section.settings.desc }}
            {% endif %}
          </div>
          <div class="small-text">
            {% if section.settings.text_1 %}
              {{ section.settings.text_1 }}
            {% endif %}  
          </div>
          {% if customer %}
            <div class="ten-button">
              <a class="button button--primary default-button"{% if section.settings.button_link_2 == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link_2 }}"{% endif %}>
                {{ section.settings.button_label_2 | escape }}
              </a> 
            </div>
          {% else %}
            {%- if section.settings.button_label != blank -%}
              <div class="ten-button ">
                <a class="sign-up-button button button--primary product-popup-modal__button"{% if section.settings.button_link == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
                  {{ section.settings.button_label | escape }}
                </a>
                <modal-opener class="sign-up-button__mobile  twy-button product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-refer-firend-for-signup" >
                  <button id="ProductPopup-{{ section.id }}" class="button twy-button link product-popup-modal__button" type="button" aria-haspopup="dialog">
                    {{ section.settings.button_label | escape }}
                  </button>
                </modal-opener>
                {% if section.settings.button_label_1 != blank %}
                  <modal-opener class="twy-button product-popup-modal__opener product-popup-next no-js-hidden" data-modal="#PopupModal-refer-firend-for-login" >
                    <button id="ProductPopup-{{ section.id }}" class="button twy-button link" type="button" aria-haspopup="dialog">
                      {{ section.settings.button_label_1 | escape }}
                    </button>
                  </modal-opener>
                {% endif %}
              </div>
            {% endif %}
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}
  <modal-dialog id="PopupModal-refer-firend-for-login" class="product-popup-modal">
    <div role="dialog" aria-label="{{ section.settings.button_label_1 }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
      <div class="product-popup-modal__content-info">
        <div class="customer customer-right login">
          <h1 id="recover" tabindex="-1">
            {{ 'customer.recover_password.title' | t }}
          </h1>
          <div>
            <p>
              {{ 'customer.recover_password.subtext' | t }}
            </p>
            {%- form 'recover_customer_password' -%}
              {% assign recover_success = form.posted_successfully? %}
              <div class="field">
                <input type="email"
                  value=""
                  name="email"
                  id="RecoverEmail"
                  autocorrect="off"
                  autocapitalize="off"
                  autocomplete="email"
                  {% if form.errors %}
                    aria-invalid="true"
                    aria-describedby="RecoverEmail-email-error"
                    autofocus
                  {% endif %}
                  placeholder="{{ 'customer.login_page.email' | t }}"
                >
                <label for="RecoverEmail">
                  {{ 'customer.login_page.email' | t }}
                </label>
              </div>
              {%- if form.errors -%}
                <small id="RecoverEmail-email-error" class="form__message">
                  <svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
                    <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                    <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                    <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                    <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                  </svg>
                  {{ form.errors.messages['form'] }}
                </small>
              {%- endif -%}
              <button>
                {{ 'customer.login_page.submit' | t }}
              </button>
              <a href="#login">
                {{ 'customer.login_page.cancel' | t }}
              </a>
            {%- endform -%}
          </div>
          <h1 id="login" tabindex="-1">
            {{ 'customer.login_page.title' | t }}
          </h1>
          <div>
            {%- if recover_success == true -%}
              <h3 class="form__message" tabindex="-1" autofocus>
                <svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
                  <path d="M6.5 12.35C9.73087 12.35 12.35 9.73086 12.35 6.5C12.35 3.26913 9.73087 0.65 6.5 0.65C3.26913 0.65 0.65 3.26913 0.65 6.5C0.65 9.73086 3.26913 12.35 6.5 12.35Z" fill="#428445" stroke="white" stroke-width="0.7"/>
                  <path d="M5.53271 8.66357L9.25213 4.68197" stroke="white"/>
                  <path d="M4.10645 6.7688L6.13766 8.62553" stroke="white">
                </svg>
                {{ 'customer.recover_password.success' | t }}
              </h3>
            {%- endif -%}
            {%- form 'customer_login', novalidate: 'novalidate', return_to: '/pages/loyalty-program-account' -%}
              {%- if form.errors -%}
                <h2 class="form__message" tabindex="-1" autofocus>
                  <span class="visually-hidden">{{ 'accessibility.error' | t }} </span>
                  <svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
                    <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                    <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                    <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                    <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                  </svg>
                  {{ 'templates.contact.form.error_heading' | t }}
                </h2>
                {{ form.errors | default_errors }}
              {%- endif -%}
        
              <div class="field">        
                <input
                  type="email"
                  name="customer[email]"
                  id="CustomerEmail"
                  autocomplete="email"
                  autocorrect="off"
                  autocapitalize="off"
                  {% if form.errors contains 'form' %}
                    aria-invalid="true"
                  {% endif %}
                  placeholder="{{ 'customer.login_page.email' | t }}"
                >
                <label for="CustomerEmail">
                  {{ 'customer.login_page.email' | t }}
                </label>
              </div>
        
              {%- if form.password_needed -%}
                <div class="field">          
                  <input
                    type="password"
                    value=""
                    name="customer[password]"
                    id="CustomerPassword"
                    autocomplete="current-password"
                    {% if form.errors contains 'form' %}
                      aria-invalid="true"
                    {% endif %}
                    placeholder="{{ 'customer.login_page.password' | t }}"
                  >
                  <label for="CustomerPassword">
                    {{ 'customer.login_page.password' | t }}
                  </label>
                </div>
        
                <a href="#recover">
                  {{ 'customer.login_page.forgot_password' | t }}
                </a>
              {%- endif -%}
        
              <button>
                {{ 'customer.login_page.sign_in' | t }}
              </button>
            {%- endform -%}
          </div>
          
          {%- if shop.checkout.guest_login -%}
            <div>
              <hr>
              <h2>{{ 'customer.login_page.guest_title' | t }}</h2>
              {%- form 'guest_login' -%}
                <button>
                  {{ 'customer.login_page.guest_continue' | t }}
                </button>
              {%- endform -%}
            </div>
          {%- endif -%}
        </div>
      </div>
      <button id="ModalClose-refer-firend-for-login" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'twy-icon-close' %}</button>
    </div>
  </modal-dialog> 
</div>
{% schema %}
  {
    "name": "Banner Refer Friend",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width banner-content banner-refer-friend",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "t:sections.image-banner.settings.image.label"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Mobile image"
      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading"
      },
      {
        "type": "text",
        "id": "heading_m",
        "label": "Heading mobile"
      },
      {
        "type": "text",
        "id": "desc",
        "label": "Description"
      },
      {
        "type": "text",
        "id": "text_1",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Join now button",
        "default": "Join now"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Join now url"
      },
      {
        "type": "text",
        "id": "button_label_1",
        "label": "Login button",
        "default": "Login"
      },
      {
        "type": "url",
        "id": "button_link_1",
        "label": "Login button url"
      },
        {
        "type": "text",
        "id": "button_label_2",
        "label": "Refer now button",
        "default": "Refer now"
      },
      {
        "type": "url",
        "id": "button_link_2",
        "label": "Refer now url"
      }
    ],
    "presets": [
      {
        "name": "Banner Refer Friend"
      }
    ]
  }
{% endschema %}
